<div class="layui-form" lay-filter="layuiadmin-form-chearter" id="form">
    <div class="form-cont">
        <div class="layui-form-item verify">
            <label class="layui-form-label">设备组</label>
            <div class="layui-input-block">
                <div class="layui-unselect layui-form-select">
                    <div class="layui-select-title"><input type="text" name='group_id' @click="groupList" :data='detail.device_group_id' verify='require' placeholder="请选择角色" class="layui-input layui-unselect" readonly><i
                            class="layui-edge"></i></div>
                    <dl class="layui-anim layui-anim-upbit">
                        <dd class="layui-select-tips layui-this">请选择设备分组</dd>
                        <dd :data='x.device_group_id' v-for="(x,index) in device_group" v-if="x.status==0">{{x.device_group_name}}</dd>
                    </dl>
                </div>
                <span class="hint">请选择设备分组</span>
            </div>
        </div>

      

        <div class="layui-form-item verify">
            <label class="layui-form-label">包机名称</label>
            <div class="layui-input-block">
                <!-- <div class="layui-unselect layui-form-select">
                    <div class="layui-select-title"><input type="text" name='activity_name' :data='detail.activity_name' placeholder="请选择范围" class="layui-input layui-unselect" readonly><i
                         class="layui-edge"></i></div>
                    <dl class="layui-anim layui-anim-upbit">
                        <dd class="layui-select-tips layui-this">包机范围</dd>
                        <dd data='0'>本年</dd>
                      <dd data='1'>本季</dd>
                      <dd data='2'>本月</dd>
                      <dd data='2'>本周</dd>
                      <dd data='2'>本日</dd>
                    </dl>
                </div> -->
                <input type="text" autocomplete="off" verify='require' v-model="detail.activity_name" placeholder="请输入包机名称" class="layui-input">
                <span class="hint">包机名称必填</span>
            </div>
        </div>
        <!-- <div class="layui-form-item verify">
          <label class="layui-form-label">包机范围</label>
          <div class="layui-input-block">
              <div class="layui-unselect layui-form-select">
                  <div class="layui-select-title"><input type="text" name='type' :data='detail.type' placeholder="请选择包机范围" class="layui-input layui-unselect" readonly><i
                       class="layui-edge"></i></div>
                  <dl class="layui-anim layui-anim-upbit">
                      <dd class="layui-select-tips layui-this">包机范围</dd>
                      <dd :data='index+1' v-for="(x,index) in types">{{x}}</dd>
                  </dl>
              </div>
              <span class="hint">包机范围必填</span>
            </div>
        </div> -->
        <div class="layui-form-item verify">
            <label class="layui-form-label">时间</label>
            <div class="layui-input-block">
                <input type="number" style="display: inline-block; margin-right: 10px; width: 60%;" autocomplete="off" verify='require' v-model="detail.grand_total" placeholder="请输入满足时间" class="layui-input">天
                <span class="hint">时间必填</span>
            </div>
        </div>


        <div class="layui-form-item verify">
            <label class="layui-form-label">价格</label>
            <div class="layui-input-block">
                <input type="number" style="display: inline-block; margin-right: 10px; width: 60%;" autocomplete="off" verify='require' v-model="detail.price" placeholder="请输入价格" class="layui-input">（元）
                <span class="hint">价格必填</span>
            </div>
        </div>

        <div class="layui-form-item verify">
            <label class="layui-form-label">包机说明</label>
            <div class="layui-input-block">
                <textarea type="text" class="layui-textarea" v-model="detail.detail" verify='require'></textarea>
                <span class="hint">包机说明必填</span>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <div class="layui-unselect layui-form-switch" :class="{'layui-form-onswitch':detail.status==1}" lay-skin="_switch" @click="radioF()"><em>{{detail.status==1?'启用':'停用'}}</em><i></i></div>
            </div>
        </div>
    </div>

    <div class="form-btn" v-if="type!=3">
        <input type="button" value="保存" class="layui-btn" @click="submit">
    </div>
</div>

<script>
    layui.use(['form'], function(){
        var $ = layui.$
            ,form = layui.form;
        var form=new Vue({
            el:'#form',
            data:{
                device_group:'',
                detail:{
                    status:1,
                    activity:'',
                    type:'',
                    device_group_id:''

                },

                old_detail:{},
                type:layui.admin.objData.type
            },
            mounted() {
                //初始化
                if(this.type!=1) this.detail=layui.admin.objData.detail,this.old_detail=JSON.stringify(layui.admin.objData.detail);
                /* $('input[name="type"]').val(this.types[this.detail.type-1]);
                $('input[name="unit"]').val(this.unit[this.detail.unit-1]); */
                $('input[name="group_id"]').val(this.detail.device_group_name);

            },
            methods:{
                radioF(){//radio选择
                    this.detail.status==1?this.detail.status=2:this.detail.status=1;
                },
                submit(){
                    if(layui.admin.form('#form')){

                        this.detail.device_group_id=parseInt($('input[name="group_id"]').attr('data'));

                        if(this.type==2){   //编辑
                            var data=layui.admin.filter(this.detail,JSON.parse(this.old_detail),'activity_id');
                            console.log(data)
                            if(data){
                                layui.admin.formapi('activity/charter_update',data,1,'list-select-table2');
                            }
                        }else{  //添加
                            layui.admin.formapi('activity/charter_add',this.detail,1,'list-select-table2');
                        }



                        //this.detail.type=parseInt($(".type_select .layui-this").attr('data'));
                   //     this.detail.unit=parseInt($('input[name="unit"]').attr('data'));


                        //console.log(this.detail);

                       // layui.admin.formapi('activity/charter_add',this.detail);

                    }
                },
                groupList:function(){
            var _this=this;
            if(!this.device_group){
                layui.admin.ajax('device_group/list',{},1).then(function(res){
                    _this.device_group=res.data.list;
                });
            }
        }
            }
        })
    });
</script>
